<template>
    <div>
        <el-form ref="form" :model="loginInfo" label-width="80px">
            <el-form-item label="用户名称">
                <el-input v-model="loginInfo.nickname"></el-input>
            </el-form-item>

            <el-form-item label="用户性别">
                <el-select v-model="loginInfo.sex" placeholder="请选择你的性别">
                <el-option label="女" value=1></el-option>
                <el-option label="男" value=2></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="年龄">
                <el-input v-model="loginInfo.age"></el-input>
            </el-form-item>

            <el-form-item label="头像">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_API+'/eduoss/fileoss'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import cookie from 'js-cookie'
import member from '@/api/member'
import request from '@/utils/request'

  export default {
    data() {
      return {
        loginInfo: {
        id: '',
        age: '',
        nickname: '',
        avatar: '',
        sex: ''
        },
        BASE_API: '',
        memberId: '',
        imageUrl: ''
      }
    },
    created(){
      this.BASE_API = request.defaults.baseURL
      this.showInfo();
    },
    methods: {
      onSubmit() {
        this.updateMemberInfo()
        this.updateMember()
      },
      //获取用户信息
      showInfo() {
      var userStr = cookie.get("OE-user")
      if(userStr) {
        this.loginInfo = JSON.parse(userStr)
        this.memberId = this.loginInfo.id
      }
    },
    updateMemberInfo(){
      cookie.set('OE-user', JSON.stringify(this.loginInfo), { domain: 'localhost' })
    },
    updateMember(){
        member.updateMember(this.loginInfo)
        .then(response=>{
            window.location.href = "/";
         })
    },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.loginInfo.avatar = res.data.url
      },
      beforeAvatarUpload(file) {
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isPNG) {
          this.$message.error('上传头像图片只能是 Png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isPNG && isLt2M;
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>